<!-- 门店列表 -->
<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="选择预约门店" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<label v-for="store in storeList" :key="store.id" @tap="selStore(store)">
			<view class="store-item coreshop-flex coreshop-justify-between coreshop-btn-all">
				<view class="coreshop-flex coreshop-align-center coreshop-btn-all">
					<view class="img-box flex-shink">
						<image class="store-img" :src="store.logoImage" mode="aspectFill" lazy-load></image>
					</view>
					<view class="item-left coreshop-flex coreshop-flex-direction coreshop-align-start coreshop-btn-all">
						<view class="coreshop-flex coreshop-align-center coreshop-justify-between coreshop-btn-all">
							<text class="store-title">{{ store.storeName }}</text>
							<radio style="transform: scale(0.7);" :checked="storeId == store.id" color="#5b33a0"
								:class="{ checked: storeId == store.id }"></radio>
						</view>
						<text class="store-content">{{ store.address }}</text>
					</view>
				</view>
			</view>
		</label>

		<view class="coreshop-bg-white coreshop-card-hight-box" />

		<!--底部-->
		<view class="coreshop-foot-hight-view" />
		<view
			class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom coreshop-text-center coreshop-padding-10">
			<u-button class='coreshop-bg-red' type="success" color="#612470" size="default" @click="saveStore">确认
			</u-button>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				storeList: [],
				// storeId: uni.getStorageSync('userStore')
				store: {
					id: '',
					name: '',
				}
			};
		},
		computed:{
			...mapState(['userStore']),
		},
		onLoad() {
			this.getStoreAddress();
			this.store = {
				id: this.userStore.id,
				name: this.userStore.name
			}
		},
		methods: {
			// 选择门店
			selStore(store) {
				this.store = {
					id: store.id,
					name: store.storeName
				}
			},
			// 确认门店
			saveStore() {
				uni.$emit('store',{storeName: this.store.name, storeId: this.store.id})
				uni.navigateBack()
			},
			//获取门店列表
			getStoreAddress() {
				let _this = this;
				// #ifdef MP-WEIXIN
				wx.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						console.log('当前位置的经度1：' + res);
					},
					fail: function() {
						_this.$u.toast("获取您的经纬度坐标失败")
					},
					complete: function(res) {
						if (!_this.longitude || !_this.latitude) {
							_this.longitude = '0';
							_this.latitude = '0';
						}
						let data = {
							'key': _this.key,
							'longitude': _this.longitude,
							'latitude': _this.latitude,
							'page': _this.page,
							'limit': _this.limit,
						}
						_this.$u.api.storeList(data).then(e => {
							if (e.status) {
								console.log(e);
								_this.storeList = [..._this.storeList, ...e.data]
							} else {
								_this.$u.toast("门店数据获取失败。");
							}
						});
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						console.log('当前位置的经度2：' + res);
					},
					fail: function() {
						_this.latitude = 0;
						_this.longitude = 0;
						_this.$u.toast("获取您的经纬度坐标失败")
					},
					complete: function(res) {
						let data = {
							'key': _this.key,
							'longitude': _this.longitude,
							'latitude': _this.latitude,
							'page': _this.page,
							'limit': _this.limit,
						}
						_this.$u.api.storeList(data).then(e => {
							if (e.status) {
								console.log(e);
								_this.storeList = [..._this.storeList, ...e.data]
							} else {
								_this.$u.toast("门店数据获取失败。");
							}
						});
					}
				});
				// #endif
			},
		}
	};
</script>


<style lang="scss" scoped>
	@import "storeList.scss";
</style>
